<template>
    <div>
        <router-link :to="'ListListDetail?type='+item.billboard.billboard_type" tag="div" class="listTop" v-for="(item,index) in listList" :key="index" id="topList">
            <div>
                <img :src="item.billboard.pic_s192" alt="">
            </div>
            <div>
                <p v-for="(item,index) in item.song_list" :key="index"><span>{{index+1}}</span>&nbsp;&nbsp;{{item.title}}
                </p>
            </div>
        </router-link>





    </div>
</template>

<script>
    import * as axios from "axios";

    export default {
        name: "SongList.vue",
        data() {
            return {
                type: [1, 2, 11, 12, 16, 21, 22, 23, 24, 25],
                size: 3,
                listList: []
            }
        },
        created() {
            for (let i of this.type) {
                axios.get("/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + i + "&size=" + this.size).then(res => {
                    console.log(res)
                    if (res.data.song_list) {
                        this.listList.push(res.data);
                    }
                    // console.log(this.listList)
                })
            }
        }
    }
</script>
<style scoped lang="less">
    #topList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;

        img {
            width: 100px;
            height: 100px;
        }

        div:nth-child(2) {
            width: calc(100% - 100px);
            margin-left: 10px;

            span {
                color: red;
            }
        }
    }
</style>